<template>
  <div>
    <h3>{{ $t("warning.title") }}</h3>
    <div class="search">
      <!-- <el-input
        class="input-with-select"
        placeholder="请输入内容"
        v-model="queryInfo.query_text"
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <el-button type="primary" @click="searchWarnings">搜索</el-button>
      <el-button type="info" plain @click="resetSearch">重置</el-button> -->
      <el-button
        type="success"
        plain
        icon="el-icon-circle-plus-outline"
        style="width: 300px"
        @click="createdProject()"
        >{{ $t("warning.created") }}</el-button
      >
    </div>
    <el-table :data="warningRuleList">
      <el-table-column
        type="index"
        :label="$t('warning.table.index')"
        width="61"
      ></el-table-column>
      <!-- <el-table-column prop="name" label="提示"> </el-table-column> -->
      <el-table-column prop="warning_name" :label="$t('warning.table.type')">
        <template slot-scope="scope">
          <!-- <el-select v-model="scope.row.type" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
          <span v-if="scope.row.type == 1">{{ $t("warning.type.cpu") }}</span>
          <span v-if="scope.row.type == 2">{{
            $t("warning.type.memory")
          }}</span>
          <span v-if="scope.row.type == 3">{{ $t("warning.type.disk") }}</span>
          <span v-if="scope.row.type == 4">{{
            $t("warning.type.network")
          }}</span>
          <span v-if="scope.row.type == 5">{{ $t("warning.type.time") }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="tel" :label="$t('warning.table.height')">
        <template slot-scope="scope">
          <el-button type="text" v-show="scope.row.type != 5"
            >{{ scope.row.value_range_start }}--{{
              scope.row.value_range_end
            }}</el-button
          >
          <el-button type="text" v-show="scope.row.type == 5">{{
            $t("warning.type.last") +
            " " +
            scope.row.value_range_end +
            " " +
            $t("warning.type.month")
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="name" :label="$t('warning.table.warning')">
      </el-table-column>
      <!-- <el-table-column prop="create_at" label="告警时间"> </el-table-column> -->
      <el-table-column :label="$t('warning.table.operation')">
        <template slot-scope="scope">
          <el-button
            type="warning"
            icon="el-icon-edit"
            size="mini"
            plain
            @click="amendBtn(scope.row)"
            >{{ $t("warning.btn.editor") }}</el-button
          >
          <el-popconfirm
            :title="$t('warning.btn.del_sure')"
            @confirm="del(scope.row)"
            style="margin: 0 0 0 10px"
          >
            <el-button
              type="danger"
              slot="reference"
              icon="el-icon-delete"
              size="mini"
              plain
              >{{ $t("warning.btn.delete") }}</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加警告模态框 -->
    <AddAlarmDialog
      :DialogShow="AddAlarmDialogShow"
      @closeDialog="createdProject"
    />
    <!-- 修改警告模态框 -->
    <AmendAlarmDialog
      :DialogShow="AmendAlarmShow"
      :form="AmendAlarmRowData"
      @closeDialog="amendBtn"
    />
  </div>
</template>

<script>
import AddAlarmDialog from "../../../components/addAlarmDialog.vue";
import AmendAlarmDialog from "../../../components/amendAlarmDialog.vue";
export default {
  components: {
    AddAlarmDialog,
    AmendAlarmDialog,
  },
  data() {
    return {
      // 下来选择列表
      options: [
        {
          value: "选项1",
          label: "编译错误",
        },
        {
          value: "选项2",
          label: "参数错误",
        },
        {
          value: "选项3",
          label: "运行失败",
        },
        {
          value: "选项4",
          label: "运行终止",
        },
        {
          value: "选项5",
          label: "暂停服务",
        },
      ],
      value: "",
      queryInfo: {
        page: 1,
        pagesize: 10,
        query_text: "",
      },
      warningRuleList: [],
      // 添加警告模态框状态
      AddAlarmDialogShow: false,
      // 修改警告模态框状态
      AmendAlarmShow: false,
      AmendAlarmRowData: {},
    };
  },
  created() {
    this.getWarningRuleList();
  },
  methods: {
    // 删除
    del(data) {
      this.$http
        .get("/business/warning/rule/del", { params: { id: data.id } })
        .then((res) => {
          if (res.data.code == 0) {
            this.$message.success("删除成功");
            this.getWarningRuleList();
          } else {
            this.$message.error("删除失败");
          }
        });
    },
    //修改按钮
    amendBtn(data) {
      this.AmendAlarmShow = this.AmendAlarmShow ? false : true;
      if (typeof data == "object")
        return (this.AmendAlarmRowData = {
          id: data.id,
          name: data.name,
          value_range_end: data.value_range_end,
          value_range_start: data.value_range_start,
          type: String(data.type),
        });
      if (!data.id) return this.getWarningRuleList();
    },
    //添加按钮
    createdProject(state) {
      this.AddAlarmDialogShow = this.AddAlarmDialogShow ? false : true;
      if (state) return this.getWarningRuleList();
    },
    getWarningRuleList() {
      this.$http.get("/business/warning/rule/list").then((res) => {
        console.log(res.data.data);
        this.warningRuleList = res.data.data;
      });
    },
    // 搜索
    searchWarnings() {
      this.getWarningRuleList();
    },
    // 重置搜索
    resetSearch() {
      this.queryInfo.query_text = "";
      this.getWarningRuleList();
    },
  },
};
</script>

<style lang="less" scoped>
h3 {
  color: #606266;
}
.search {
  margin: 10px 0;
  .el-input {
    width: 34%;
  }
  .el-button {
    margin-left: 10px;
  }
}
</style>